<template>
    <div style="padding: 20px;">
        <p>Name: {{name.value}}</p>
        <div class="counter">
            <!-- 绑定事件 decrement -->
            <button @click="decrement">-</button>
            <span>Count: {{count.value}}</span>
            <!-- 绑定事件 increment -->
            <button @click="increment">+</button>
        </div>
        <!-- 绑定事件 reset -->
        <button @click="reset">Reset</button>
    </div>
</template>
<script>
    export default function() {
        let count = this.ref(0)
        let name = this.ref('kmin')

        // 增加
        this.increment = () => {
            count.value++;
        }
        // 减少
        this.decrement = () => {
            count.value--;
        }
        // 重置
        this.reset = () => {
            count.value = 0;
        }
    }
</script>
<style>
    span {
        color: red;
    }
</style>